<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .box {
      width: 100px;
      height: 100px;
      padding: 20px;
      border: 10px solid red;
      /* box-sizing: border-box; */
      background-color: orange;
      overflow: auto;
    }
  </style>
</head>

<body>
  <div class="box">
    你去过国内最美的地方是哪# 我去过国内最美的地方是新疆喀纳斯。喀纳斯是一个美丽而神秘的地方，这里群山环抱，森林密布，湖水清澈，风景奇特。为国家级5A级景区，国家地质公园，国家森林公园。
  </div>
  <script>
    var boxEl = document.querySelector('.box')

    // 获取样式(局限性很强)
    var boxStyle = getComputedStyle(boxEl)
    console.log(boxStyle.width, boxStyle.height)

    // 获取更多信息
    console.log(
      boxEl.clientWidth, // contentWidth + padding (不包含滚动条)
      boxEl.clientHeight,// contentHeight + padding
      boxEl.clientLeft, // border-left 的宽度
      boxEl.clientTop,// border-top 的宽度
      boxEl.offsetWidth,// 元素完整的宽度
      boxEl.offsetHeight,// 元素完整的高度
      boxEl.offsetLeft,// 距离父元素的x
      boxEl.offsetTop,// 距离父元素的y
      boxEl.scrollHeight,// 可滚动高度
      boxEl.scrollTop // 已滚动的区域
    )
    setTimeout(function () {
      console.log(boxEl.scrollTop) // 滚动的区域
    }, 2000)


  </script>
</body>

</html>